<!-- 通讯录详情 -->
<template>
  <view class="home flex column">
    <u-navbar :background="{ backgroundColor: '#3D5FFF' }" :title="title" back-icon-color="#fff" title-color="#fff">
      <u-image slot="right" width="40" height="40" src="/static/image/filter.png" @click="goSearch" class="u-m-r-20" />
    </u-navbar>
    <!-- 搜索框 -->
    <view class="search">
      <u-search
        placeholder="请输入姓名"
        v-model="searchData.name"
        shape="round"
        bg-color="#fff"
        height="80"
        :show-action="true"
        :animation="true"
        :input-style="{ marginLeft: '20rpx' }"
        :search-icon="searchSrc"
        placeholder-color="#999999"
        :action-style="{
          color: '#288CFE',
          fontSize: '14px',
          fontWeight: '400',
        }"
        @search="handleSearch"
        @custom="handleSearch"
        @change="handleSearch"
      ></u-search>
    </view>
    <!-- 列表 -->
    <scroll-view
      :scroll-y="true"
      class="container item one"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="50"
      refresher-background="#F5F5F5"
      @refresherrefresh="onRefresh"
      @scrolltolower="onScrollToLower"
    >
      <view class="container-body">
        <template v-if="list && list.length">
          <u-card
            @click="viewPeopleHistory(item)"
            :border="false"
            :body-style="{ padding: '0 30rpx' }"
            :show-head="false"
            v-for="(item, index) in list"
            :key="index"
          >
            <view slot="body">
              <view class="people-card">
                <view class="people-card-name">
                  {{ item.name }}
                  <text class="people-card-post">（{{ item.workType }}）</text>
                </view>
                <view class="people-info-row"> 下井时间：{{ item.time }} </view>
                <view class="people-info-row"> 下井位置：{{ item.inJzName }} </view>
                <view class="people-info-row"> 出井时间：{{ item.outTime }} </view>
                <view class="people-info-row" v-show="item.peopleFlag === '2'"> 出井位置：{{ item.jzName }} </view>
              </view>
            </view>
          </u-card>
          <view class="p-t-10 p-b-10">
            <u-loadmore :status="status" />
          </view>
        </template>
        <template v-if="showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { BASE_IP, BASE_URL } from "@/utils/ip.js";
export default {
  name: "personnelLocationHistory",
  data() {
    return {
      searchData: {
        pageSize: 20,
        pageNumber: 1,
        name: "",
        beginDate: this.$date(Date.now()).substring(0, 11) + "00:00:00", //开始时间
        endDate: this.$date(Date.now()), // 结束时间
        customerCode: "",
      },
      emitEvent: "personnelLocationHistory",
      title: "",
      triggered: false, // 下拉刷新
      showEmpty: false,
      status: "loading",
      list: [],
      searchSrc: require("@/static/image/search.png"),
    };
  },
  mounted() {},
  methods: {
    /**
     * 初始化
     */
    init() {
      this.searchData.pageNumber = 1;
      this.status = "loading";
      this.showEmpty = false;
    },
    /**
     * 请求数据
     */
    async getData() {
      const res = await this.$post("/admin/home/personnelOrientation/detailList/dataList", this.searchData);
      if (res && res.body.content) {
        this.list = this.searchData.pageNumber === 1 ? res.body.content : this.list.concat(res.body.content);
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = "nomore";
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.list && this.list.length === 0) {
          this.showEmpty = true;
        } else {
          this.showEmpty = false;
        }
      }
    },
    /**
     * 搜索
     */
    handleSearch() {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer);
      }
      this.searchTimer = setTimeout(() => {
        this.getData();
      }, 300);
    },
    /**
     * 上拉加载
     */
    onScrollToLower() {
      if (this.status === "loading") {
        this.searchData.pageNumber++;
        this.getData();
      }
    },
    onRefresh() {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.init();
        this.getData();
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    viewPeopleHistory(item) {
      uni.navigateTo({
        url: `./history?item=${encodeURIComponent(JSON.stringify(item))}&emitEvent=${this.emitEvent}`,
      });
    },
    goSearch() {
      const form = {
        ...this.searchData,
      };
      uni.navigateTo({
        url: `./screen?num=${this.num}&form=${JSON.stringify(form)}&emitEvent=${this.emitEvent}`,
      });
    },
  },
  onLoad(options) {
    const { code, name } = options;
    this.$set(this.searchData, "customerCode", code);
    this.title = name;
    this.getData();

    uni.$on(this.emitEvent, async (res) => {
      this.searchData = {
        ...res,
        pageNumber: 1,
      };
      this.init();
      this.getData();
    });
  },
  onUnload() {
    // 清除监听
    uni.$off(this.emitEvent);
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* 搜索框 */
  .search {
    padding: 20rpx 28rpx;
  }
  /deep/.u-card {
    box-shadow: 0px 1px 40rpx rgba(184, 184, 184, 0.2) !important;
    border-radius: 8rpx !important;
  }
  .people-card {
    padding: 10px 0;
    .people-card-name {
      font-weight: bold;
      font-size: 32rpx;
      .people-card-post {
        font-weight: 500;
      }
    }
    .people-info-row {
      margin-top: 10rpx;
    }
  }
}
</style>
